<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>合并与塌陷</title>
    <style>
        .brother1 {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin-bottom: 20px;
        }
        .brother2 {
            width: 200px;
            height: 200px;
            background-color: purple;
            margin-top: 20px;
        }
        .father {
            width: 500px;
            height: 500px;
            background-color: pink;
            /*解决塌陷的三种方法*/
            /* 1.给father一个边框   */
            /*border: 1px solid transparent;*/
            /*2.给father一个padding*/
            /*padding-top: 1px;*/
            /*3.添加属性overflow:hidden*/
            overflow: hidden;
        }
        .son {
            width: 200px;
            height: 80px;
            background-color: purple;
            margin-top: 50px;

        }
    </style>
</head>
<body>
<h3>相邻垂直合并</h3>
<div class="brother1">
</div>
<div class="brother2">
</div>
<h3>嵌套垂直塌陷</h3>
<div class="father">
    <div class="son"></div>
</div>

</body>
</html>